@import '@c/Layout/styles/theme.scss';

// :focus
input, textarea {
  &:focus, &:hover {
    outline: none !important;
    border-color: $themeColor_IE !important;
    border-color: $themeColor !important;
  }  
}

// el-message
.el-message {
  > p {
    word-break: break-all;
    white-space:pre-wrap;
    line-height: 20px;
  }
}

// .el-scrollbar
.el-scrollbar {
  &.el-cascader__suggestion-panel {
    .el-scrollbar__wrap {
      margin-bottom: 0 !important;
    }
    .el-cascader__suggestion-item.is-checked {
      color: $themeColor_IE;
      color: $themeColor;
    }
  }
  .el-scrollbar__wrap {
    overflow-x: hidden;
    &.el-select-dropdown__wrap,
    &.el-cascader-menu__wrap,
    &.el-autocomplete-suggestion__wrap {
      margin-bottom: 0 !important;
    }
  }
  .el-scrollbar__thumb, .el-scrollbar__thumb:hover {
    background-color: rgba(204, 204, 204, 0.5);
  }
  .el-scrollbar__bar.is-horizontal {
    height: 8px;
    bottom: 0;
  }
  .el-scrollbar__bar.is-vertical {
    right: 0;
  }
}

// el-select
div.el-select {
  line-height: 36px;
  .el-input.is-focus .el-input__inner {
    border-color: $themeColor_IE;
    border-color: $themeColor;
  }
}
div.el-select-dropdown, div.el-select-dropdown.is-multiple {
  .el-select-dropdown__item.selected {
    color: $themeColor_IE;
    color: $themeColor;
  }
}

// el-input
div.el-input {
  line-height: 36px;
  &.is-disabled .el-input__inner:hover {
    border-color: #DCDFE6 !important;
  }
  &.input_readonly .el-input__inner {
    background: #F5F7FA;
    &:focus, &:hover {
      cursor: not-allowed;
      border-color: #DCDFE6 !important;
    }
  }
  .el-input__inner {
    height: 36px;
  }
  .el-input__prefix {
    left: 8px;
  }
  .el-input__suffix {
    right: 8px;
  }
  .el-input__prefix, .el-input__suffix {
    .el-input__icon {
      height: 36px;
      line-height: 36px;
    }
  }
  &.disable {
    .el-input__inner {
      background: #f5f7fa;
    }
  }
  &.readonly, &.disable {
    .el-input__inner {
      &:hover, &:focus {
        border-color: #DCDFE6 !important;
      }
    }
  }
}
.el-input-group {
  &.button_append .el-input-group__append {
    line-height: 0;
    color: #ffffff;
    background: $themeColor_IE;
    border: 1px solid $themeColor_IE;
    background: $themeColor;
    border: 1px solid $themeColor;
    user-select: none;
    cursor: pointer;
    &:hover {
      opacity: 0.7;
    }
  }
}
// el-textarea
div.el-textarea {
  line-height: 36px;
  .el-textarea__inner {
    min-height: 36px !important;
    line-height: 1.7;
  }
  &.disable {
    .el-textarea__inner {
      background: #f5f7fa;
    }
  }
  &.readonly, &.disable {
    .el-textarea__inner {
      &:hover, &:focus {
        border-color: #DCDFE6 !important;
      }
    }
  } 
}

// el-button
button.el-button {
  padding: 7px 15px;
  &.is-round {
    padding: 7px 15px;
  }
  &.el-button--default:not(.el-button--primary) {
    // color: #888888;
    &:not(.active) {
      &:focus, &:hover {
        background: $subColor_IE;
        color: $themeColor_IE;
        border-color: $themeColor_IE;
        background: $subColor;
        color: $themeColor;
        border-color: $themeColor;      
      }
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover,
    &.is-plain.is-disabled:focus, &.is-plain.is-disabled:hover {
      background: $buttonDisabled;
      border-color: $buttonDisabled;
      color: #ffffff;
      opacity: 1;
    }
    &.is-plain {
      &:focus, &:hover {
        background: #ffffff;
      }
    }
  }
  &.el-button--primary {
    background: $themeColor_IE;
    border-color: $themeColor_IE;
    background: $themeColor;
    border-color: $themeColor;
    &.is-plain {
      color: $themeColor_IE;
      border-color: $themeColor_IE;
      background: $subColor_IE;
      color: $themeColor;
      border-color: $themeColor;
      background: $subColor;
      &:focus, &:hover {
        background: $themeColor_IE;
        background: $themeColor;
      }
    }
  }
  &.el-button--success {
    background: $successColor;
    border-color: $successColor;
    &.is-plain {
      color: $successColor;
      border-color: $successColor;
      background: $successSubColor;
      &:focus, &:hover {
        background: $successColor;
      }
    }
  }
  &.el-button--warning {
    background: $warningColor;
    border-color: $warningColor;
    &.is-plain {
      color: $warningColor;
      border-color: $warningColor;
      background: $warningSubColor;
      &:focus, &:hover {
        background: $warningColor;
      }
    }
  }
  &.el-button--danger {
    background: $dangerColor;
    border-color: $dangerColor;
    &.is-plain {
      color: $dangerColor;
      border-color: $dangerColor;
      background: $dangerSubColor;
      &:focus, &:hover {
        background: $dangerColor;
      }
    }    
  }
  &.el-button--info {
    background: $infoColor;
    border-color: $infoColor;
    &.is-plain {
      color: $infoColor;
      border-color: $infoColor;
      background: $infoSubColor;
      &:focus, &:hover {
        background: $infoColor;
      }
    }    
  }  
  &.el-button--primary, &.el-button--success,
  &.el-button--warning, &.el-button--danger, &.el-button--info {
    color: #ffffff;
    &.is-plain {
      &:focus, &:hover {
        color: #ffffff;
        opacity: 1;
      }
    }
    &:focus, &:hover {
      opacity: 0.7;
    }
    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover,
    &.is-plain.is-disabled:focus, &.is-plain.is-disabled:hover {
      background: $buttonDisabled;
      border-color: $buttonDisabled;
      color: #ffffff;
      opacity: 1;
    }
  }
}

// el-table
$elTableBc: #d9d9d9;
.el-table {
  &.el-table--striped {
    border: 1px solid;
    border-color: $elTableBc !important; 
    border-bottom: none;
    &.el-table--border {
      border-right: none;
    }
    .el-table__body tr.el-table__row--striped td {
      background: #f5f5f5;
    }
  }
  tr.el-table__row.hover-row > td,
  &.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: oldlace !important;
  }
  thead th {
    padding: 10px 0;
    background: #f5f5f5;
    color: #404040;
  }
  .el-table__fixed-right-patch {
    background: #f5f5f5;
  }
  .el-table__body td {
    padding: 5px 0;
  }
  &:not(.el-table--scrollable-x) .el-table__fixed-right{ // 解决切换 table 后固定栏底部出现的横线
    height: 100% !important;
    z-index: 0;
  }
  &.el-table--border {
    &::after {
      width: 0;
    }
    .el-table__fixed-right-patch {
      border-right: 1px solid $elTableBc;
    }
    .el-table__empty-block {
      border-right: 1px solid $elTableBc;
    }
    th {
      border-color: $elTableBc !important;
    }
    th.gutter:last-of-type {
      border-color: transparent !important;
      border-right-color: $elTableBc !important;
      border-right-width: 1px;
    }
    thead tr:last-child {
      th.gutter:last-of-type {
        border-bottom-color: $elTableBc !important;
      }
    }
  }
}
// 更改表格边框颜色
.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
  border-color: $elTableBc !important; 
}
.el-table--border::after, .el-table--group::after, .el-table::before{
  background-color: $elTableBc !important;
}

// el-switch
.el-switch {
  .el-switch__input:focus + span.el-switch__core {
    box-shadow: 0 0 3px 1px $themeColor_IE;
    box-shadow: 0 0 3px 1px $themeColor;
  }
  span.el-switch__core {
    background: #f0f0f2;
    border-color: #c5c5c5;
  }
  &.is-checked {
    span.el-switch__core {
      background: $themeColor_IE;
      border-color: $themeColor_IE;
      background: $themeColor;
      border-color: $themeColor;
    }
  }
}

// .el-form
.el-form {
  .el-form-item {
    margin-bottom: 10px;
    .el-form-item__content {
      & > *:not(button) {
        vertical-align: middle;
      }
      .el-checkbox {
        line-height: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
  }
}

// el-radio
.el-radio {
  margin-top: 4px;
  margin-bottom: 4px;
  &:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: 0 0 3px 1px $themeColor_IE !important;
    box-shadow: 0 0 3px 1px $themeColor !important;
  }
  .el-radio__input:focus-within .el-radio__inner {
    box-shadow: 0 0 3PX 1px $themeColor_IE;
    box-shadow: 0 0 3PX 1px $themeColor;
  }
  // .el-radio__original:focus + .el-radio__inner {
  //   box-shadow: 0 0 3PX 1px $themeColor_IE;
  //   box-shadow: 0 0 3PX 1px $themeColor;
  // }
  .el-radio__input.is-checked .el-radio__inner {
    background: $themeColor_IE;
    border-color: $themeColor_IE;
    background: $themeColor;
    border-color: $themeColor;
  }
  .el-radio__input.is-checked:not(.is-disabled) + span.el-radio__label {
    color: $themeColor_IE;
    color: $themeColor;
  }  
  .el-radio__label {
    padding-left: 2px;
  }
  &.is-disabled, .el-radio__input.is-disabled {
    cursor: not-allowed;
  }  
  &.readonly {
    .el-radio__input.is-disabled.is-checked .el-radio__inner {
      background: $themeColor_IE;
      border-color: $themeColor_IE;
      background: $themeColor;
      border-color: $themeColor;
    }
    .el-radio__input.is-disabled.is-checked+span.el-radio__label {
      color: $themeColor_IE;
      color: $themeColor;
    }
    .el-radio__input.is-disabled .el-radio__inner {
      background: #ffffff;
    }    
    .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
      background-color: #ffffff;
    }
    .el-radio__input.is-disabled+span.el-radio__label {
      color: #606266;
    }
    .el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner {
      border-color: #DCDFE6;
    }
  }
}

// el-checkbox
.el-checkbox {
  .el-checkbox__input:not(.is-disabled):hover .el-checkbox__inner {
    border-color: $themeColor_IE;
    border-color: $themeColor;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: $themeColor_IE;
    border-color: $themeColor_IE;
    background: $themeColor;
    border-color: $themeColor;
  }
  .el-checkbox__input.is-checked+span.el-checkbox__label {
    color: $themeColor_IE;
    color: $themeColor;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner {
    box-shadow: 0 0 3px 1px $themeColor_IE;
    box-shadow: 0 0 3px 1px $themeColor;
    border-color: $themeColor_IE;
    border-color: $themeColor;
  }
  .el-checkbox__inner:hover {
    border-color: $themeColor_IE;
    border-color: $themeColor;
  }
  .el-checkbox__label {
    padding-left: 8px;
  }
  &.is-disabled, .el-checkbox__input.is-disabled {
    cursor: not-allowed;
  }
  &.readonly {
    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
      background: $themeColor_IE;
      border-color: $themeColor_IE;
      background: $themeColor;
      border-color: $themeColor;
    }
    .el-checkbox__input.is-disabled.is-checked+span.el-checkbox__label {
      color: $themeColor_IE;
      color: $themeColor;
    }
    .el-checkbox__input.is-disabled .el-checkbox__inner {
      background: #ffffff;
    }    
    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
      border-color: #ffffff;
    }
    .el-checkbox__input.is-disabled+span.el-checkbox__label {
      color: #606266;
    }
  }  
}

// el-dialog
.el-dialog {
  .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close {
    color: $themeColor_IE;
    color: $themeColor;
  }
  .el-dialog__body {
    padding-top: 10px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    font-size: 24px;
  }
}

// el-dropdown-menu
.el-dropdown-menu {
  .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
    color: $themeColor_IE;
    background: $subColor_IE;
    color: $themeColor;
    background: $subColor;
  }
}

// el-pagination
div.el-pagination {
  &.is-background .el-pager li:not(.disabled).active {
    background-color: $themeColor_IE;
    background-color: $themeColor;
  }
}

// el-cascader
div.el-cascader {
  line-height: 36px;
  .el-input.is-focus .el-input__inner {
    border-color: $themeColor_IE;
    border-color: $themeColor;
  }
}
li.el-cascader-node.is-selectable.in-checked-path,
li.el-cascader-node.in-active-path {
  color: $themeColor_IE;
  color: $themeColor;
}
.el-cascader-panel {
  .el-cascader-menu__wrap {
    height: auto;
    min-height: 204px;
    max-height: 419px;
  }
  .el-scrollbar__view.el-cascader-menu__list {
    &.is-empty {
      position: static;
    }
    li {
      height: auto;
      line-height: normal;
      padding-top: 9px;
      padding-bottom: 9px;
    }
  }
}
.el-cascader__suggestion-panel {
  .el-scrollbar__view.el-cascader__suggestion-list {
    max-height: 419px;
    li {
      height: auto;
      line-height: normal;
      padding-top: 9px;
      padding-bottom: 9px;
    }
  }
}

// el-image
.el-image-viewer__wrapper {
  cursor: default;
  .el-image-viewer__close i.el-icon-close {
    color: #ffffff;
    font-weight: bold;
    font-size: 24px;
  }
  .el-image-viewer__actions {
    cursor: default;
    i {
      font-size: 24px;
      cursor: pointer;
    }
  }
  .el-image-viewer__prev i, .el-image-viewer__next i {
    font-size: 20px;
  }
}

// el-tooltip
div.el-tooltip__popper {
  max-width: 400px;
  line-height: 22px;
}

// el-tabs
div.el-tabs {
  .el-tabs__item {
    &.is-active, &:not(.is-disabled):hover {
      color: $themeColor_IE;
      color: $themeColor;
    }
    &.is-disabled {
      cursor: not-allowed;
    }
  }
  .el-tabs__active-bar {
    background-color: $themeColor_IE;
    background-color: $themeColor;
  }
}
